

import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
// import axios from 'axios'
import axios from '../../axios/axios'
import Draggable from 'react-draggable';
import html2canvas from 'html2canvas';
import Particles from 'react-particles-js';
import jsPDF from 'jspdf';

import './index.css'

import { DatePicker, Radio, Layout, Menu, Form, Input, Modal, Button, Space, InputNumber, Checkbox, Popconfirm, message } from 'antd';

import {
    BarChartOutlined,
    UserOutlined,
    UploadOutlined,
    ForkOutlined,
    MinusCircleOutlined,
    PlusCircleOutlined
} from '@ant-design/icons';

const { Header, Content, Sider, Footer } = Layout;

// const list = localStorage.list ? JSON.parse(localStorage.list) : [];
// const index = list.length;
// const setEditing = Object.assign({}, { ...defaultQuestionnaire, index })
// localStorage.editing = JSON.stringify(setEditing);


const editing = localStorage.editing ? JSON.parse(localStorage.editing) : [];

const download = () => {
    const element = document.getElementById('demo');
    const w = element.offsetWidth;
    const h = element.offsetHeight;
    const offsetTop = element.offsetTop;
    const offsetLeft = element.offsetLeft;
    const canvas = document.createElement("canvas");
    let abs = 0;
    const win_i = document.body.clientWidth;
    const win_o = window.innerWidth;
    if (win_o > win_i) {
        abs = (win_o - win_i) / 2;
    }
    canvas.width = w * 2;
    canvas.height = h * 2;
    const context = canvas.getContext('2d');
    context.scale(2, 2);
    context.translate(-offsetLeft - abs, -offsetTop);
    html2canvas(element, {
        allowTaint: true,
        scale: 2
    }).then(canvas => {
        const contentWidth = canvas.width;
        const contentHeight = canvas.height;
        const pageHeight = contentWidth / 592.28 * 841.89;
        let leftHeight = contentHeight;
        let position = 0;
        const imgWidth = 595.28;
        const imgHeight = 592.28 / contentWidth * contentHeight;
        const pageDate = canvas.toDataURL('image/jpeg', 1.0);
        const pdf = new jsPDF('', 'pt', 'a4');
        if (leftHeight < pageHeight) {
            pdf.addImage(pageDate, 'JPEG', 0, position, imgWidth, imgHeight);
        }
        else {
            while (leftHeight > 0) {
                pdf.addImage(pageDate, 'JPEG', 0, position, imgWidth, imgHeight)
                leftHeight -= pageHeight;
                position -= 841.89;
                if (leftHeight > 0) {
                    pdf.addPage()
                }
            }
        }
        pdf.save('打卡问卷.pdf');
    })
};

window.lat = 39.91092454;
window.lng = 116.4133836;

function confirm(e) {
    console.log(e);
    message.success('Click on Yes');
}

function cancel(e) {
    console.log(e);
    message.error('Click on No');
}

export default class Epidemic extends React.Component {

    constructor(props) {
        super(props);
        this.handleTitleClick = this.handleTitleClick.bind(this);
        this.handleTitleChange = this.handleTitleChange.bind(this);
        this.handleTitleBlur = this.handleTitleBlur.bind(this);
        // this.handleAddQuestion = this.handleAddQuestion.bind(this);
        this.handleAddRadio = this.handleAddRadio.bind(this);
        this.handleAddTemperatureRadio = this.handleAddTemperatureRadio.bind(this);
        this.handleAddHighRiskRadio = this.handleAddHighRiskRadio.bind(this);
        this.handleAddEpidemicRadio = this.handleAddEpidemicRadio.bind(this);
        // this.handleAddDefaultRadio = this.handleAddDefaultRadio.bind(this); 
        this.handleAddCheckbox = this.handleAddCheckbox.bind(this);
        // this.handleAddDefaultCheckbox = this.handleAddDefaultCheckbox.bind(this); 
        this.handleAddTextArea = this.handleAddTextArea.bind(this);
        this.handleAddLocationTextArea = this.handleAddLocationTextArea.bind(this);
        // this.handleAddDefaultTextArea = this.handleAddDefaultTextArea.bind(this); 
        this.handleAddNameTextArea = this.handleAddNameTextArea.bind(this);
        this.handleAddNumberTextArea = this.handleAddNumberTextArea.bind(this);
        this.handleQuestionChange = this.handleQuestionChange.bind(this);
        this.handleShiftQuestion = this.handleShiftQuestion.bind(this);
        this.handleCopyQuestion = this.handleCopyQuestion.bind(this);
        this.handleRemoveQuestion = this.handleRemoveQuestion.bind(this);
        this.handleOptionChange = this.handleOptionChange.bind(this);
        this.handleAddRadioOption = this.handleAddRadioOption.bind(this);
        this.handleAddCheckboxOption = this.handleAddCheckboxOption.bind(this);
        this.handleRemoveOption = this.handleRemoveOption.bind(this);
        // this.handleTextChange = this.handleTextChange.bind(this);
        this.handleRequire = this.handleRequire.bind(this);
        this.handleDatePick = this.handleDatePick.bind(this);
        // this.handleSaveQuestionnaire = this.handleSaveQuestionnaire.bind(this);
        // this.handleReleaseQuestionnaire = this.handleReleaseQuestionnaire.bind(this);
        this.handleFinish = this.handleFinish.bind(this);
        // this.radioChange = this.radioChange.bind(this);
        this.handleAddGrade = this.handleAddGrade.bind(this);
        this.handleAddGradeOption = this.handleAddGradeOption.bind(this);
        this.handleGradeChange = this.handleGradeChange.bind(this);
        this.numberChange = this.numberChange.bind(this);
        this.finishEdit = this.finishEdit.bind(this);
        this.handleQuestionDescriptionChange = this.handleQuestionDescriptionChange.bind(this);
        this.release = this.release.bind(this);
        this.state = {
            q_id: {},
            title: '',
            description: '',
            questions: [],
            titleEditable: false,
            numberVisible: true,
            state: 1,
            date: '',
            visible: false,
            disabled: true,
            bounds: { left: 0, top: 0, bottom: 0, right: 0 },
        }

    }

    componentDidMount() {
        if (window.location.hash.split('/')[1] == undefined || window.location.hash.split('/')[1] == "") {
            // 第一种通过DOM元素获取标签并执行点击事件
            var labelName = document.getElementById("morenName").click();
            var labelTelephone = document.getElementById("morenNumber").click();
            var labelTemperature = document.getElementById("morenTemperature").click();
            var labelHighRisk = document.getElementById("morenHighRisk").click();
            var labelEpidemic = document.getElementById("morenEpidemic").click();
            // var labelLocation = document.getElementById("morenLocation").click();
        }
        // if(this.props.endTime){
        //     let endTime = this.props.endTime.replace(/-/g, "/");
        //     this.countFun(endTime);
        // }
        // setTimeout(() => {
        //     console.log(window.lat);
        //     console.log(window.lng);
        // },2000); 
    }

    componentWillMount() {
        // this.setState({
        //     q_id: this.props.location.query
        // })
        let _this = this;
        let value = _this.props.location.state;


        this.setState({
            q_id: value,
        })

        console.log(value);
        axios.post('/edit', { q_id: value })
            .then(res => {
                if (res.data.success === true) {
                    var json = JSON.parse(res.data.data)
                    _this.setState({
                        title: json.title,
                        questions: json.questions,
                        numberVisible: json.numberVisible,

                    })
                }
            })

    }

    handleTitleClick() {
        this.setState({
            titleEditable: true
        })
    }

    handleTitleChange(e) {
        this.setState({
            title: e.target.value
        })
    }

    handleTitleBlur() {
        this.setState({
            titleEditable: false
        })
    }

    // handleAddQuestion() {
    //     this.setState({
    //         addAreaVisible: !this.state.addAreaVisible
    //     })
    // }

    handleAddRadio() {
        const newQuestion = {
            key: 0,
            type: 'radio',
            title: '单选题',
            options: [{ key: 0, text: '选项一', checked: false, grade: 0 }, { key: 1, text: '选项二', checked: false, grade: 0 }],
            text: '',
            value: 0,
            required: false,
            edited: false,
            description: '请输入问题描述'
        };
        newQuestion.key = this.state.questions.length;
        this.setState((prevState) => ({
            questions: prevState.questions.concat(newQuestion),
            // addAreaVisible: false
        }));
    }

    handleAddTemperatureRadio() {
        const newQuestion = {
            key: 0,
            type: 'radio',
            title: '打卡问卷——选择体温模板',
            options: [{ key: 0, text: '正常', checked: false, grade: 0 }, { key: 1, text: '异常（偏高）', checked: false, grade: 0 }, { key: 2, text: '异常（偏低）', checked: false, grade: 0 }],
            text: '',
            value: 0,
            required: false,
            edited: false,
            description: '请选择您的体温状况是'
        };
        newQuestion.key = this.state.questions.length;
        this.setState((prevState) => ({
            questions: prevState.questions.concat(newQuestion),
            // addAreaVisible: false
        }));
    }

    handleAddHighRiskRadio() {
        const newQuestion = {
            key: 0,
            type: 'radio',
            title: '打卡问卷——高风险地区模板',
            options: [{ key: 0, text: '是', checked: false, grade: 0 }, { key: 1, text: '否', checked: false, grade: 0 }],
            text: '',
            value: 0,
            required: false,
            edited: false,
            description: '您近日是否去过高风险地区？'
        };
        newQuestion.key = this.state.questions.length;
        this.setState((prevState) => ({
            questions: prevState.questions.concat(newQuestion),
            // addAreaVisible: false
        }));
    }

    handleAddEpidemicRadio() {
        const newQuestion = {
            key: 0,
            type: 'radio',
            title: '打卡问卷——有无新冠症状模板',
            options: [{ key: 0, text: '是', checked: false, grade: 0 }, { key: 1, text: '否', checked: false, grade: 0 }],
            text: '',
            value: 0,
            required: false,
            edited: false,
            description: '您近日是否具有新冠症状？'
        };
        newQuestion.key = this.state.questions.length;
        this.setState((prevState) => ({
            questions: prevState.questions.concat(newQuestion),
            // addAreaVisible: false
        }));
    }

    handleAddCheckbox() {
        const newQuestion = {
            key: 0,
            type: 'checkbox',
            title: '多选题',
            options: [{ key: 0, text: '选项一', checked: false, grade: 0 }, { key: 1, text: '选项二', checked: false, grade: 0 }],
            required: false,
            text: '',
            value: 0,
            edited: false,
            description: '请输入问题描述'
        };
        newQuestion.key = this.state.questions.length;
        this.setState((prevState) => ({
            questions: prevState.questions.concat(newQuestion),
            // addAreaVisible: false
        }));
    }

    handleAddTextArea() {
        const newQuestion = {
            key: 0,
            type: 'textarea',
            title: '文本题',
            options: [],
            text: '',
            value: 0,
            required: false,
            edited: false,
            description: '请输入问题描述'
        };
        newQuestion.key = this.state.questions.length;
        this.setState((prevState) => ({
            questions: prevState.questions.concat(newQuestion),
            // addAreaVisible: false
        }));
    }

    handleAddNameTextArea() {
        const newQuestion = {
            key: 0,
            type: 'textarea',
            title: '打卡问卷——填写姓名模板',
            options: [],
            text: '',
            value: 0,
            required: false,
            edited: false,
            description: '请在此处输入您的姓名'
        };
        newQuestion.key = this.state.questions.length;
        this.setState((prevState) => ({
            questions: prevState.questions.concat(newQuestion),
            // addAreaVisible: false
        }));
    }

    handleAddNumberTextArea() {
        const newQuestion = {
            key: 0,
            type: 'textarea',
            title: '打卡问卷——填写学号模板',
            options: [],
            text: '',
            value: 0,
            required: false,
            edited: false,
            description: '请在此处输入您的学号'
        };
        newQuestion.key = this.state.questions.length;
        this.setState((prevState) => ({
            questions: prevState.questions.concat(newQuestion),
            // addAreaVisible: false
        }));
    }

    handleAddLocationTextArea() {
        const newQuestion = {
            key: 0,
            type: 'textarea',
            title: '打卡问卷——获取地理位置模板',
            options: [],
            text: '',
            value: 0,
            required: false,
            edited: false,
            description: '纬度 : ' + window.lat + ' 经度 : ' + window.lng,
            // description:"ABABAB\ncdcdcd",
        };
        newQuestion.key = this.state.questions.length;
        this.setState((prevState) => ({
            questions: prevState.questions.concat(newQuestion),
            // addAreaVisible: false
        }));
    }

    handleAddGrade() {
        const newQuestion = {
            key: 0,
            type: 'grade',
            title: '评分题',
            options: [{ key: 0, text: '不满意', checked: false, grade: '1' }, { key: 1, text: '一般', checked: false, grade: '2' }, { key: 3, text: '满意', checked: false, grade: '3' }],
            required: false,
            edited: false,
            text: '',
            value: 0,
            description: '请输入问题描述'
        };
        newQuestion.key = this.state.questions.length;
        this.setState((prevState) => ({
            questions: prevState.questions.concat(newQuestion),
            // addAreaVisible: false
        }));
    }

    handleQuestionChange(e, questionIndex) {
        let questions = this.state.questions;
        questions[questionIndex].title = e.target.value;
        this.setState({
            questions: questions
        });
    }

    handleQuestionDescriptionChange(e, questionIndex) {
        let questions = this.state.questions;
        questions[questionIndex].description = e.target.value;
        this.setState({
            questions: questions
        });
    }

    handleShiftQuestion(questionIndex, num) {
        let questions = this.state.questions;
        let shiftQuestion = questions.splice(questionIndex, 1)[0];
        questions.splice(questionIndex + num, 0, shiftQuestion);
        this.setState({
            questions: questions
        })
    }

    handleCopyQuestion(questionIndex) {
        let questions = this.state.questions;
        // let copy = Object.assign({}, questions[questionIndex]);
        // if (questions[questionIndex].type !== 'textarea') {
        //     copy.options = copy.options.slice(0);
        // }
        // questions.splice(questionIndex + 1, 0, copy);
        let copy = questions[questionIndex];
        questions.push(copy);
        this.setState({
            questions: questions
        });
    }

    handleRemoveQuestion(questionIndex) {
        let questions = this.state.questions;
        questions.splice(questionIndex, 1);
        this.setState({
            questions: questions
        });
    }

    handleOptionChange(e, questionIndex, optionIndex) {
        let questions = this.state.questions;
        questions[questionIndex].options[optionIndex].text = e.target.value;
        this.setState({
            questoins: questions
        });
    }

    handleGradeChange(e, questionIndex, optionIndex) {
        let questions = this.state.questions;
        questions[questionIndex].options[optionIndex].grade = e.target.value;
        this.setState({
            questoins: questions
        });
    }

    handleAddRadioOption(questionIndex) {
        let questions = this.state.questions;
        let num = questions[questionIndex].options.length
        const newOption = { key: num, text: '新选项', checked: false, grade: 0 };
        questions[questionIndex].options.push(newOption);
        this.setState({
            questions: questions
        });
    }

    handleAddCheckboxOption(questionIndex) {
        let questions = this.state.questions;
        let num = questions[questionIndex].options.length
        const newOption = { key: num, text: '新选项', checked: false, grade: 0 };
        questions[questionIndex].options.push(newOption);
        this.setState({
            questions: questions
        });
    }

    handleAddGradeOption(questionIndex) {
        let questions = this.state.questions;
        let num = questions[questionIndex].options.length
        const newOption = { key: num, text: '新选项', grade: '分数', checked: false };
        questions[questionIndex].options.push(newOption);
        this.setState({
            questions: questions
        });
    }


    handleRemoveOption(questionIndex, optionIndex) {
        let questions = this.state.questions;
        questions[questionIndex].options.splice(optionIndex, 1);
        this.setState({
            questions: questions
        });
    }

    handleFinish(questionIndex) {
        let questions = this.state.questions;
        questions[questionIndex].edited = true;
        this.setState({
            questions: questions
        })
    }

    // handleTextChange(e, questionIndex) {
    //     let questions = this.state.questions;
    //     questions[questionIndex].text = e.target.value;
    //     this.setState({
    //         questions: questions
    //     });
    // }

    handleRequire(e, questionIndex) {
        let questions = this.state.questions;
        questions[questionIndex].required = e.target.checked;
        this.setState({
            questions: questions
        });
    }



    handleDatePick(date, dateString) {
        this.setState({
            date: dateString
        })
    }

    // handleSaveQuestionnaire() {
    //     const index = this.state.index;
    //     list[index] = Object.assign({}, this.state);
    //     localStorage.list = JSON.stringify(list);
    //     Modal.success({
    //         title: '保存成功'
    //     });
    // }

    // handleReleaseQuestionnaire() {
    //     let me = this;

    //     if (this.state.questions.length === 0) {
    //         Modal.warning({
    //             title: '请添加至少一个问题'
    //         });
    //     } else if (this.state.date === '') {
    //         Modal.warning({
    //             title: '请选择截止日期'
    //         });
    //     } else {
    //         Modal.confirm({
    //             title: '确定发布问卷吗？',
    //             content: '截止日期为 ' + this.state.date,
    //             onOk() {
    //                 const index = me.state.index;
    //                 list[index] = Object.assign({}, { ...me.state, stage: '发布中' });
    //                 localStorage.list = JSON.stringify(list);
    //                 window.location.reload();
    //                 me.props.history.push('/');
    //             }
    //         });
    //     }
    // }

    // radioChange(e, questionIndex) {
    //     let questions = this.state.questions;
    //     questions[questionIndex].value = e.target.value;
    //     this.setState({
    //         questions: questions
    //     });
    // };

    // checkboxChange(e, questionIndex, optionIndex) {
    //     let questions = this.state.questions;
    //     let options = questions[questionIndex].options;
    //     options[optionIndex].checked = !options[optionIndex].checked;
    //     this.setState({
    //         questions: questions
    //     });
    // };

    numberChange(e) {
        if (this.state.numberVisible === true) {
            this.setState({
                numberVisible: false
            })
        }
        else {
            this.setState({
                numberVisible: true
            })
        }

    }

    getTitle() {
        return (
            this.state.titleEditable ? (
                <div className="editTitle" style={{ margin: '0 20px 20px 20px', padding: 3, textAlign: 'center' }} onClick={this.handleTitleClick}>
                    <Input style={{ fontSize: 18, fontWeight: 'bold', padding: 30, textAlign: 'center' }} value={this.state.title} onChange={this.handleTitleChange} onBlur={this.handleTitleBlur} />
                </div>
            ) : (
                <div className="editTitle" style={{ margin: '0 20px 20px 20px', padding: 20, textAlign: 'center' }} onClick={this.handleTitleClick}>
                    <h2><strong>{this.state.title}</strong></h2>
                </div>
            )
        );
    }

    // getAddArea() {
    //     return (
    //         this.state.addAreaVisible ? (
    //             <div style={{ padding: 30, textAlign: 'center', border: '1px solid #eee' }}>
    //                 <Button icon="check-circle-o" size="large" onClick={this.handleAddRadio}>单选</Button>
    //                 <Button icon="check-square-o" size="large" style={{ marginLeft: 16 }} onClick={this.handleAddCheckbox}>多选</Button>
    //                 <Button icon="file-text" size="large" style={{ marginLeft: 16 }} onClick={this.handleAddTextArea}>文本</Button>
    //             </div>
    //         ) : ''
    //     );
    // }

    getQuestions() {
        let questions = this.state.questions;
        const { TextArea } = Input;
        console.log(questions);

        if (JSON.stringify(questions) !== '[]') {
            return questions.map((question, questionIndex, array) => {
                if (question.type === 'radio') {
                    if (question.edited === false) {
                        return (
                            <div className="questionsWrap" style={{ padding: 30 }} key={questionIndex}>
                                <span style={{ fontSize: 18, marginRight: 20 }}>题目</span>
                                <Input value={question.title} style={{ borderStyle: 'none', width: '70%', marginLeft: 3, marginBottom: 20 }} onChange={(e) => this.handleQuestionChange(e, questionIndex)} />
                                <br />
                                <span style={{ fontSize: 18, marginRight: 20 }}>描述</span>
                                <Input value={question.description} style={{ borderStyle: 'none', width: '70%', marginLeft: 3, marginBottom: 20 }} onChange={(e) => this.handleQuestionDescriptionChange(e, questionIndex)} />
                                {question.options.map((option, optionIndex) => {
                                    return (
                                        <div style={{ margin: '8px 0' }} key={optionIndex}>
                                            <Input value={option.text} style={{ borderStyle: 'none', width: '40%', marginLeft: '80px' }} onChange={(e) => this.handleOptionChange(e, questionIndex, optionIndex)} />
                                            <PlusCircleOutlined className="deleteOption" style={{ display: 'inline-block', marginLeft: 8 }} onClick={() => this.handleAddRadioOption(questionIndex, optionIndex)} />
                                            <MinusCircleOutlined className="deleteOption" style={{ display: 'inline-block', marginLeft: 8 }} onClick={() => this.handleRemoveOption(questionIndex, optionIndex)} />
                                        </div>
                                    );
                                })}
                                <div className="addOption" style={{ width: '20%', height: 28, margin: '8px 20px' }} onClick={() => this.handleAddRadioOption(questionIndex)}></div>
                                <Checkbox checked={question.required} style={{ margin: '0 20px' }} onChange={(e) => this.handleRequire(e, questionIndex)}>此题是否必填</Checkbox>
                                {this.getQuestionOperator(questionIndex, array)}
                            </div>
                        );
                    }
                    else {
                        if (this.state.numberVisible === true) {
                            return (
                                <div className="question-border" key={questionIndex}>

                                    <div className="questionTitle">{questionIndex + 1}.&nbsp;&nbsp;&nbsp;{question.title}</div>
                                    <Radio.Group value={question.value} style={{ textAlign: 'left' }}>
                                        <Space direction="vertical">
                                            {question.options.map((option, optionIndex) => {
                                                return (
                                                    <Radio key={optionIndex} value={optionIndex + 1} style={{ fontSize: 16 }}>{option.text}</Radio>
                                                )
                                            })}
                                        </Space>
                                    </Radio.Group>
                                    {this.getQuestionOperator(questionIndex, array)}
                                </div>
                            );
                        }
                        else {
                            return (
                                <div className="question-border" key={questionIndex}>

                                    <div className="questionTitle">{question.title}</div>
                                    <Radio.Group value={question.value} style={{ textAlign: 'left' }}>
                                        <Space direction="vertical">
                                            {question.options.map((option, optionIndex) => {
                                                return (
                                                    <Radio key={optionIndex} value={optionIndex + 1} style={{ fontSize: 16 }}>{option.text}</Radio>
                                                )
                                            })}
                                        </Space>
                                    </Radio.Group>
                                    {this.getQuestionOperator(questionIndex, array)}
                                </div>
                            );
                        }

                    }

                } else if (question.type === 'checkbox') {
                    if (question.edited === false) {
                        return (
                            <div className="questionsWrap" style={{ padding: 30 }} key={questionIndex}>
                                <span style={{ fontSize: 18, marginRight: 20 }}>题目</span>
                                <Input value={question.title} style={{ borderStyle: 'none', width: '70%', marginLeft: 3, marginBottom: 20 }} onChange={(e) => this.handleQuestionChange(e, questionIndex)} />
                                <br />
                                <span style={{ fontSize: 18, marginRight: 20 }}>描述</span>
                                <Input value={question.description} style={{ borderStyle: 'none', width: '70%', marginLeft: 3, marginBottom: 20 }} onChange={(e) => this.handleQuestionDescriptionChange(e, questionIndex)} />
                                <br />
                                {question.options.map((option, optionIndex) => {
                                    return (
                                        <div style={{ margin: '8px 0' }} key={optionIndex}>
                                            <Input value={option.text} style={{ borderStyle: 'none', width: '40%', marginLeft: '80px' }} onChange={(e) => this.handleOptionChange(e, questionIndex, optionIndex)} />
                                            <PlusCircleOutlined className="deleteOption" style={{ display: 'inline-block', marginLeft: 8 }} onClick={() => this.handleAddCheckboxOption(questionIndex, optionIndex)} />
                                            <MinusCircleOutlined type="close" className="deleteOption" style={{ display: 'inline-block', marginLeft: 8 }} onClick={() => this.handleRemoveOption(questionIndex, optionIndex)} />
                                        </div>
                                    );
                                })}
                                <div className="addOption" style={{ width: '20%', height: 28, margin: '8px 20px' }} onClick={() => this.handleAddCheckboxOption(questionIndex)}></div>
                                <Checkbox checked={question.required} style={{ margin: '0 20px' }} onChange={(e) => this.handleRequire(e, questionIndex)}>此题是否必填</Checkbox>
                                {this.getQuestionOperator(questionIndex, array)}
                            </div>
                        );
                    }
                    else {
                        if (this.state.numberVisible === true) {
                            return (
                                <div className="question-border" key={questionIndex}>
                                    <div className="questionTitle">{questionIndex + 1}.&nbsp;&nbsp;&nbsp;{question.title}</div>

                                    <Space direction="vertical" >
                                        {question.options.map((option, optionIndex) => {
                                            return (
                                                <Checkbox key={optionIndex} style={{ fontSize: 16 }} >{option.text}</Checkbox>
                                            )
                                        })}
                                    </Space>

                                    {this.getQuestionOperator(questionIndex, array)}
                                </div>
                            );
                        }
                        else {
                            return (
                                <div className="question-border" key={questionIndex}>
                                    <div className="questionTitle">{question.title}</div>

                                    <Space direction="vertical" >
                                        {question.options.map((option, optionIndex) => {
                                            return (
                                                <Checkbox key={optionIndex} style={{ fontSize: 16 }}
                                                // onChange={(e) => this.checkboxChange(e, questionIndex, optionIndex)}
                                                >{option.text}</Checkbox>
                                            )
                                        })}
                                    </Space>

                                    {this.getQuestionOperator(questionIndex, array)}
                                </div>
                            );
                        }
                    }

                } else if (question.type === 'textarea') {
                    if (question.edited === false) {
                        return (
                            <div className="questionsWrap" style={{ padding: 30 }} key={questionIndex}>
                                <span style={{ fontSize: 18, marginRight: 20 }}>题目</span>
                                <Input value={question.title} style={{ borderStyle: 'none', width: '70%', marginLeft: 3 }} onChange={(e) => this.handleQuestionChange(e, questionIndex)} />
                                <br />
                                <span style={{ fontSize: 18, marginRight: 20 }}>描述</span>
                                <Input value={question.description} style={{ borderStyle: 'none', width: '70%', marginLeft: 3, marginBottom: 20 }} onChange={(e) => this.handleQuestionDescriptionChange(e, questionIndex)} />
                                <div style={{ margin: '16px 20px' }}>
                                    <TextArea rows={5} value={question.text} onChange={(e) => this.handleTextChange(e, questionIndex)} />
                                </div>
                                <Checkbox checked={question.required} style={{ margin: '0 20px' }} onChange={(e) => this.handleRequire(e, questionIndex)}>此题是否必填</Checkbox>
                                {this.getQuestionOperator(questionIndex, array)}
                            </div>
                        );
                    }
                    else {
                        if (this.state.numberVisible === true) {
                            return (
                                <div className="question-border" key={questionIndex}>
                                    <div className="questionTitle">{questionIndex + 1}.&nbsp;&nbsp;&nbsp;{question.title}</div>
                                    <div style={{ margin: '16px 20px' }}>

                                        <TextArea rows={5} value={question.text} />
                                    </div>
                                    {this.getQuestionOperator(questionIndex, array)}
                                </div>
                            )
                        }
                        else {
                            return (
                                <div className="question-border" key={questionIndex}>
                                    <div className="questionTitle">{question.title}</div>
                                    <div style={{ margin: '16px 20px' }}>

                                        <TextArea rows={5} value={question.text} />
                                    </div>
                                    {this.getQuestionOperator(questionIndex, array)}
                                </div>
                            )
                        }

                    }

                }
                else if (question.type === 'grade') {
                    if (question.edited === false) {
                        return (
                            <div className="questionsWrap" style={{ padding: 30 }} key={questionIndex}>
                                <span style={{ fontSize: 18, marginRight: 20 }}>题目</span>
                                <Input value={question.title} style={{ borderStyle: 'none', width: '70%', marginLeft: 3, marginBottom: 10 }} onChange={(e) => this.handleQuestionChange(e, questionIndex)} />
                                <br />
                                <span style={{ fontSize: 18, marginRight: 20 }}>描述</span>
                                <Input value={question.description} style={{ borderStyle: 'none', width: '70%', marginLeft: 3, marginBottom: 20 }} onChange={(e) => this.handleQuestionDescriptionChange(e, questionIndex)} />
                                {question.options.map((option, optionIndex) => {
                                    return (
                                        <div style={{ margin: '8px 0' }} key={optionIndex} key={optionIndex}>

                                            <Input value={option.text} style={{ borderStyle: 'none', width: '20%', marginRight: 20, marginLeft: 80 }} onChange={(e) => this.handleOptionChange(e, questionIndex, optionIndex)} />
                                            <Input value={option.grade} style={{ borderStyle: 'none', width: '20%' }} onChange={(e) => this.handleGradeChange(e, questionIndex, optionIndex)} />
                                            <PlusCircleOutlined className="deleteOption" style={{ display: 'inline-block', marginLeft: 8 }} onClick={() => this.handleAddOption(questionIndex, optionIndex)} />
                                            <MinusCircleOutlined className="deleteOption" style={{ display: 'inline-block', marginLeft: 8 }} onClick={() => this.handleRemoveOption(questionIndex, optionIndex)} />
                                        </div>
                                    );
                                })}
                                <div className="addOption" style={{ width: '20%', height: 28, margin: '8px 20px' }} onClick={() => this.handleAddOption(questionIndex)}></div>
                                <Checkbox checked={question.required} style={{ margin: '0 20px' }} onChange={(e) => this.handleRequire(e, questionIndex)}>此题是否必填</Checkbox>
                                {this.getQuestionOperator(questionIndex, array)}
                            </div>
                        );
                    }
                    else {
                        if (this.state.numberVisible === true) {
                            return (
                                <div className="question-border" key={questionIndex}>
                                    <div className="questionTitle">{questionIndex + 1}.&nbsp;&nbsp;&nbsp;{question.title}</div>
                                    <span style={{ marginRight: 15, fontSize: 18 }}>{question.options[0].text}</span>
                                    <Radio.Group value={question.value}>

                                        {question.options.map((option, optionIndex) => {
                                            return (
                                                <Radio value={optionIndex + 1} key={optionIndex}>{option.grade}</Radio>
                                            )
                                        })}

                                    </Radio.Group>
                                    <span style={{ fontSize: 16 }}>{question.options[question.options.length - 1].text}</span>
                                    {this.getQuestionOperator(questionIndex, array)}
                                </div>
                            )
                        }
                        else {
                            return (
                                <div className="question-border" key={questionIndex}>
                                    <div className="questionTitle">{question.title}</div>
                                    <span style={{ marginRight: 15, fontSize: 18 }}>{question.options[0].text}</span>
                                    <Radio.Group value={question.value}>

                                        {question.options.map((option, optionIndex) => {
                                            return (
                                                <Radio value={optionIndex + 1} key={optionIndex}>{option.grade}</Radio>
                                            )
                                        })}

                                    </Radio.Group>
                                    <span style={{ fontSize: 16 }}>{question.options[question.options.length - 1].text}</span>
                                    {this.getQuestionOperator(questionIndex, array)}
                                </div>
                            )
                        }
                    }
                }
                else {
                    return null;
                }
            })
        }
    }

    editRadio(questionIndex) {
        let questions = this.state.questions;
        questions[questionIndex].edited = false;
        this.setState({
            questions: questions
        })
    }

    getQuestionOperator(questionIndex, array) {
        let questions = this.state.questions;
        return (
            <div>
                <p style={{ float: 'right' }}>
                    {questions[questionIndex].edited === false ? (
                        <span className="questionOperate" style={{ marginLeft: 8 }} onClick={() => this.handleFinish(questionIndex)} >完成编辑</span>
                    ) : (
                        <span className="questionOperate" style={{ marginLeft: 8 }} onClick={() => this.editRadio(questionIndex)}>编辑</span>
                    )
                    }

                    {questionIndex === 0 ? (
                        null
                    ) : (
                        <span className="questionOperate" style={{ marginLeft: 8 }} onClick={() => this.handleShiftQuestion(questionIndex, -1)}>上移</span>
                    )}
                    {questionIndex === array.length - 1 ? (
                        null
                    ) : (
                        <span className="questionOperate" style={{ marginLeft: 8 }} onClick={() => this.handleShiftQuestion(questionIndex, 1)}>下移</span>
                    )}
                    <span className="questionOperate" style={{ marginLeft: 8 }} onClick={() => this.handleCopyQuestion(questionIndex)}>复用</span>
                    <span className="questionOperate" style={{ marginLeft: 8 }} onClick={() => this.handleRemoveQuestion(questionIndex)}>删除</span>
                </p>
            </div>
        );
    }

    // getFooter() {
    //     const disabledDate = (current) => current && current.valueOf() < Date.now();

    //     return (
    //         <div style={{ padding: 20 }}>
    //             <div style={{ float: 'left' }}>
    //                 <span>问卷截止日期：</span>
    //                 <DatePicker onChange={this.handleDatePick} disabledDate={disabledDate} />
    //                 <span style={{ marginLeft: 16 }}>你选择的日期为: {this.state.date}</span>
    //             </div>
    //             <div style={{ float: 'right' }}>
    //                 <Button onClick={this.handleSaveQuestionnaire}>保存问卷</Button>
    //                 <Button type="primary" style={{ marginLeft: 16 }} onClick={this.handleReleaseQuestionnaire}>发布问卷</Button>
    //             </div>
    //         </div>
    //     );
    // }
    // finishEdit() {
    //     let formData = new FormData();
    //     formData.append("title", this.state.title);
    //     formData.append("usable", this.state.usable);
    //     formData.append("quertions[]", this.state.questions);
    //     formData.append("titleEditable", this.state.titleEditable);
    //     formData.append("numberVisible", this.state.numberVisible);
    //     fetch('http://localhost:8080'/*用实际端口替换此处url */, 
    //         {
    //         method: 'POST',
    //         headers: {},
    //         body: formData,  
    //     }).then((response) => {
    //             if (response.ok) {
    //                 return response.json();
    //             }  
    //         }).then((json) => {
    //                 alert(JSON.stringify(json));  
    //         }).catch((error) => {
    //                     console.error(error);  
    //         });
    // }

    finishEdit() {
        let _this = this;
        console.log(this.state);
        axios.post('/questions', this.state)
            .then(res => {
                if (res.data.success === true) {
                    alert('完成编辑');
                    _this.props.history.push('/home');
                }
            })

    }
    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    onStart = (event, uiData) => {
        const { clientWidth, clientHeight } = window?.document?.documentElement;
        const targetRect = this.draggleRef?.current?.getBoundingClientRect();
        this.setState({
            bounds: {
                left: -targetRect?.left + uiData?.x,
                right: clientWidth - (targetRect?.right - uiData?.x),
                top: -targetRect?.top + uiData?.y,
                bottom: clientHeight - (targetRect?.bottom - uiData?.y),
            },
        });
    };
    getUrl() {
        let url = 'http://localhost:3000/fill' + this.state.q_id;
        return url;
    }

    getImage() {
        axios.get('/qrcode/getQRCodeBase64', { params: { content: this.getUrl() } })
            .then(res => {
                let url = JSON.stringify(res.data.data);
                console.log(url);
                return (
                    <div>
                        <img src="http://39.107.83.163:8090//qrcode/getQRCodeBase64" />
                    </div>
                )
            })
    }
    release() {
        let _this = this;
        let tmp = this.state.q_id;

        axios.post('/ques/setState', { "qid": tmp, "state": 2 })
            .then(res => {
                axios.post('/questions', this.state)
                    .then(res => {
                    })
            })
        this.setState({
            state: 2,
            visible: true
        })
    }
    render() {

        return (
            <Layout className="main">
            <Particles
                    style={{ position: "fixed", top:0}}
                    height="95%"
                    width="100%"
                    params={{
                        particles: {
                        color: {
                            value: "#000000"
                        },
                        line_linked: {
                            color: {
                            value: "#1E90FF"
                            }
                        },
                        number: {
                            value: 50
                        },
                        size: {
                            value: 3.25
                        }
                        }
                    }}
                />
                <Header className="head" style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
                    <div className="logo" />
                    <Checkbox className="number" onChange={(e) => this.numberChange(e)} >隐藏题号</Checkbox>
                    <span className="yulan" onClick={download}>生成PDF</span>
                    <span className="yulan" onClick={this.finishEdit}>完成编辑</span>
                    <span className="yulan" onClick={this.release}>发布问卷</span>
                    <Modal title={
                        <div
                            style={{
                                width: '100%',
                                cursor: 'move',
                            }}
                            onMouseOut={() => {
                                this.setState({
                                    disabled: true,
                                });
                            }}
                            onFocus={() => { }}
                            onBlur={() => { }}

                        >
                            分享问卷
                        </div>
                    }
                        visible={this.state.visible}
                        onCancel={this.handleCancel}
                        okButtonProps={{ disabled: true }}
                        cancelButtonProps={{ disabled: true }}
                        footer={null}
                        width={500}
                        modalRender={modal => (
                            <Draggable
                                disabled={this.state.disabled}
                                bounds={this.state.bounds}
                                onStart={(event, uiData) => this.onStart(event, uiData)}
                            >
                                <div ref={this.draggleRef}>{modal}</div>
                            </Draggable>
                        )}
                    >
                        <div>访问链接：http:localhost:3000/fill{this.state.q_id}</div>
                        {/* <div style={{ marginTop: 10 }}>二维码：</div>
                        {this.getImage()} */}

                    </Modal>
                    {/* <span className="yulan">预览</span> */}
                </Header>
                <Layout >
                    <Sider
                        className=".sider"
                        style={{
                            overflow: 'auto',
                            height: '100vh',
                            position: 'fixed',
                            left: 0,
                            marginTop: 60,
                        }}
                    >
                        <div className="subtitle">题型</div>
                        <Menu mode="inline" defaultSelectedKeys={['1']}>
                            <Menu.Item key="1" icon={<UserOutlined />} onClick={this.handleAddRadio}
                            >
                                单选题
                            </Menu.Item>
                            <Menu.Item key="2" icon={<ForkOutlined />} onClick={this.handleAddCheckbox}
                            >
                                多选题
                            </Menu.Item>
                            <Menu.Item key="3" icon={<UploadOutlined />} onClick={this.handleAddTextArea}

                            >
                                填空题
                            </Menu.Item>
                            {/* <Menu.Item key="4" icon={<BarChartOutlined />} onClick={this.handleAddGrade}

                            >
                                评分题
                            </Menu.Item> */}

                        </Menu>
                    </Sider>
                    <Layout
                        className="site-layout" style={{ marginLeft: 200 }}
                    >
                        <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
                            <div className="site-layout-background" style={{ padding: 24, textAlign: 'left', marginTop: '70px' }} id="demo">

                                {this.getTitle()}
                                <div style={{ padding: 20, borderTop: '2px solid #ccc' }}>
                                    <div style={{ marginBottom: 20 }}>
                                        <div style={{ marginBottom: 20 }} onClick={this.handleAddNameTextArea} id='morenName'>
                                            {/* 自动加载组件功能 */}
                                        </div>
                                        <div style={{ marginBottom: 20 }} onClick={this.handleAddNumberTextArea} id='morenNumber'>
                                            {/* 自动加载组件功能 */}
                                        </div>
                                        <div style={{ marginBottom: 20 }} onClick={this.handleAddTemperatureRadio} id='morenTemperature'>
                                            {/* 自动加载组件功能 */}
                                        </div>
                                        <div style={{ marginBottom: 20 }} onClick={this.handleAddHighRiskRadio} id='morenHighRisk'>
                                            {/* 自动加载组件功能 */}
                                        </div>
                                        <div style={{ marginBottom: 20 }} onClick={this.handleAddEpidemicRadio} id='morenEpidemic'>
                                            {/* 自动加载组件功能 */}
                                        </div>
                                        {/* <div style={{ marginBottom: 20 }} onClick={this.handleAddLocationTextArea} id='morenLocation'>
                                            <div style={{ marginBottom: 20 }}>
                                                <center>
                                                    <button className=".btn-block" shape='circle' size = "large">
                                                        点击此处获取地理位置信息
                                                    </button>
                                                </center>
                                            </div>
                                            
                                            自动加载组件功能
                                        </div> */}
                                        {this.getQuestions()}
                                    </div>
                                    {/* {this.getAddArea()} */}
                                </div>

                            </div>
                        </Content>
                        <Footer>
                            {/* 从主页面传输数据相对较慢，大概等五秒钟后可以实现 */}
                            <div style={{ marginBottom: 20 }} id='morenLocation'>
                                <center>
                                    <Popconfirm title="是否确认授权给当前页面以获得位置信息？" onConfirm={confirm, this.handleAddLocationTextArea} onCancel={cancel} okText="确定" cancelText="取消">
                                        <a href="#">
                                            <button className=".btn-block" shape='circle' size="large" >
                                                点击此处获取地理位置信息
                                            </button>
                                        </a>
                                    </Popconfirm>
                                </center>
                            </div>
                        </Footer>
                    </Layout>
                </Layout>
            </Layout>
        )
    }
}


// import { Popconfirm, message } from 'antd';

// function confirm(e) {
//   console.log(e);
//   message.success('Click on Yes');
// }

// function cancel(e) {
//   console.log(e);
//   message.error('Click on No');
// }

// ReactDOM.render(
//   <Popconfirm title="Are you sure delete this task?" onConfirm={confirm} onCancel={cancel} okText="Yes" cancelText="No">
//     <a href="#">Delete</a>
//   </Popconfirm>
// , mountNode);